<template>
  <div class="comm-box layout anchortarget">
    <div class="hd">
      <h2 class="fl">热销户型</h2>
      <span class="fr list tab">
        <span class="span on">全部<span>({{list && list.length}})</span></span>
        <!-- <span class="span">三居<span>(1)</span></span> -->
      </span>
    </div>
    <div class="bd">
      <ul class="bd-list lazy-box">
        <li class="clearfix item3" v-for="(item,index) in list" :key="index">
          <div class="img">
            <img
              class="lazy"
              :src="item.house_img[0]"
            />
            <span class="num"
              ><em class="mask"></em><em class="txt">2</em></span
            >
          </div>
          <div class="text">
            <p class="tit">
              {{item.room_num}}室{{item.halls_num}}厅{{item.toilet_num}}卫
              <em class="onsale">在售<i></i></em>
            </p>
            <div class="tags-box clearfix">
              <span class="tag">分区合理</span>
              <span class="tag">空间开阔</span>
              <span class="tag">户型方正</span>
              <span class="tag">采光极佳</span>
              <span class="tag">通风极佳</span>
            </div>
            <div class="attrs">
              <span class="attr"
                ><em class="label">总价约:</em
                ><em class="value red"> <em class="bold">{{ ((item.house_area * refer_price) / 10000).toFixed(0) }}万/套</em></em>
              </span>
              <span class="attr"
                ><em class="label">单价:</em
                ><em class="value red"
                  ><em class="bold">{{refer_price}}元/㎡</em></em
                ></span
              >
              <span class="attr"
                ><em class="label">首付约:</em
                ><em class="value">{{((item.house_area * refer_price) / 10000 * 0.3).toFixed(0)}}万元</em></span
              >
              <span class="attr"
                ><em class="label">卧室:</em><em class="value">{{item.room_num}}间</em></span
              >
              <span class="attr"
                ><em class="label">厨房:</em><em class="value">{{item.toilet_num}}间</em></span
              >
            
              <span class="attr"
                ><em class="label">建面:</em><em class="value">{{ item.house_area }}m²</em></span
              >
              <span class="attr"
                ><em class="label">类别:</em><em class="value">平层</em></span
              >
              <span class="attr"
                ><em class="label">朝向:</em><em class="value">东南</em></span
              >
              <span class="attr"
                ><em class="label">实用率:</em><em class="value">90%</em></span
              >
            </div>
          </div>
          <!-- <div>咨询客服</div> -->
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { defineComponent ,reactive} from "vue";
import { useStore } from "vuex";
export default defineComponent({
  props: {
      list: Array,
      refer_price: Number
  },
  setup(props) {


    return {
    };
  },
});
</script>


<style lang="scss">
.comm-box {
  position: relative;
  z-index: 0;
  margin: 55px 0;
  background-color: #fff;
  .hd {
    height: 50px;
    border-bottom: 1px solid #efefef;
    display: flex;
    justify-content: space-between;
    margin: 0;

    h2 {
      font-size: 24px;
      font-weight: bold;
      line-height: 24px;
    }
    .tab {
      .span {
        display: inline-block;
        height: 24px;
        line-height: 24px;
        margin-left: 33px;
        color: #9b9b9b;
        cursor: pointer;
        font-size: 14px;
      }
      .on {
        color: #3f85ff;
      }
    }
  }
  .bd {
    .bd-list {
      margin-top: 3px;

      li {
        position: relative;
        min-height: 120px;
        padding: 27px 0 35px;
        border-bottom: 1px solid #efefef;
        display: flex;
        &:last-child {
          border: none;
        }
        .img {
          position: relative;
          width: 160px;
          height: 120px;
          margin-top: 2px;
          margin-right: 33px;
          border: 1px solid #cbcbcb;
          background: #f5f5f6;
          .lazy {
            width: 100%;
            height: 100%;
            display: block;
          }
          .num {
            position: absolute;
            height: 18px;
            line-height: 18px;
            color: #fff;
            font-size: 12px;
            padding: 0 6px;
            right: 0;
            bottom: 0;
            overflow: hidden;
          }
        }
        .text {
          width: 435px;
          .tit {
            font-size: 22px;
            line-height: 30px;
            .onsale {
              position: relative;
              top: -3px;
              display: inline-block;
              height: 18px;
              line-height: 18px;
              margin-left: 9px;
              padding: 0 4px;
              font-size: 11px;
              font-style: normal;
              color: #fff;
              border-radius: 1px;
              background: -webkit-linear-gradient(
                -270deg,
                #ff322d 0%,
                #ff795f 100%
              );
              background: -moz-linear-gradient(
                -270deg,
                #ff322d 0%,
                #ff795f 100%
              );
              background: -o-linear-gradient(-270deg, #ff322d 0%, #ff795f 100%);
              background: -ms-linear-gradient(
                -270deg,
                #ff322d 0%,
                #ff795f 100%
              );
              background-image: linear-gradient(
                -270deg,
                #ff322d 0%,
                #ff795f 100%
              );
            }
          }
          .tags-box {
            .tag {
              margin-top: 10px;
              margin-right: 6px;
              padding: 0 5px;
              height: 18px;
              line-height: 18px;
              background: rgba(122, 144, 182, 0.08);
              font-size: 12px;
              color: #7a90b6;
            }
          }
          .attrs {
            margin-top: 12px;
            .attr {
              width: 33%;
              font-size: 14px;
              color: #000;
              height: 20px;
              line-height: 20px;
              margin-top: 8px;
              white-space: nowrap;
              overflow: hidden;
              display: inline-block;
              text-overflow: ellipsis;
              .label {
                color: #9b9b9b;
                margin-right: 7px;
              }
              .red {
                color: #3f85ff;
              }
            }
          }
        }
      }
    }
  }
}
</style>